<template>
  <div
    class="channelSection"
    :class="{
      channelSection_dark: theme == 'dark',
      channelSection_light: theme == 'light',
    }"
  >
    <div class="channelSection-header">{{ title }}</div>
    <div class="channelSection-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    theme: {
      type: String,
      default: "light",
    },
    title: String,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.channelSection {
  &_dark {
    background-color: #fafafa;
  }

  &-header {
    text-align: center;
    font-weight: bold;
    font-size: 26px;
    line-height: 34px;
    color: #000;
    padding-bottom: 16px;
    padding-top: 70px;

    background-image: url("@/assets/image/publice/line.png");
    background-position-x: center;
    background-position-y: 100%;
    background-repeat: no-repeat;
  }

  &-body {
    overflow: auto;
  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .channelSection {
    &-header {
      font-size: fn.rpx(26);
      line-height: fn.rpx(34);
      padding-bottom: fn.rpx(16);
      padding-top: fn.rpx(70);
      background-size: fn.rpx(236) fn.rpx(3);
    }
  }
}
</style>